<!--
 * @Description: 学生端考试
 * @Author: 晋龍
 * @Date: 2023-02-13 09:14:40
 * @LastEditors: 晋龍
 * @LastEditTime: 2023-02-19 16:02:32
-->
<template>
  <div class="main">
    <!-- AppBar导航栏 -->
    <var-app-bar color="rgb(244,245,249)" text-color="rgb(102,106,119)" class="myPublishQuertion">
      <template #left>
        <var-button color="transparent" text-color="rgb(102,106,119)" round text @click="exit=true">
          <var-icon name="chevron-left" :size="30" class="myPublishQuertion" />
        </var-button>
      </template>
      <template #right>
        <!-- 倒计时 -->
        <!-- <span class="countDown">
          <var-icon name="chevron-left" :size="28" />60:00<var-icon name="chevron-right" :size="28" />
        </span> -->
        <var-menu placement="bottom-start" :offset-y="12">
          <var-button color="transparent" text-color="#000000" round text>
            <var-icon name="menu" :size="24" />
          </var-button>

          <template #menu>
            <var-button color="transparent" @click="center = true" text-color="#000000">
              提交试卷
            </var-button>
          </template>
        </var-menu>
      </template>
    </var-app-bar>

    <!-- 结束考试弹窗 -->
    <var-popup v-model:show="center">
      <div class="popup-example-block">
        <div class="blue">
          <div class="p1">提交须知</div>
        </div>
        <div class="popup-content">
          <p>请确认您的试卷，确认后提交。</p>
        </div>
        <div class="readed">
          <var-button type="primary" size="large" color="rgb(102,106,119)" text-color="#fff"
            @click="center = false">暂不提交</var-button>
        </div>
        <div class="startExam">
          <var-button type="primary" size="large" color="rgb(38, 89, 247)" text-color="#fff"
            @click="onSubmit()">提交试卷</var-button>
        </div>
      </div>
    </var-popup>
    <!-- 退出考试弹窗 -->
    <var-popup v-model:show="exit">
      <div class="popup-example-block">
        <div class="blue">
          <div class="p1">提交须知</div>
        </div>
        <div class="popup-content">
          <p>请提交后退出，退出后，您的记录将不会存留。</p>
        </div>
        <div class="readed">
          <var-button type="primary" size="large" color="rgb(102,106,119)" text-color="#fff"
            @click="exit = false">暂不退出</var-button>
        </div>
        <div class="startExam">
          <var-button type="primary" size="large" color="rgb(38, 89, 247)" text-color="#fff"
            @click="onBack">退出试卷</var-button>
        </div>
      </div>
    </var-popup>
    <!-- 题目 -->
    <div class="test">
      <!-- 题目内容 -->
      <div class="questionContent">
        <!-- 选择题目选项 -->
        <ul v-for="(item, i) in questionList.records" :key="i">
          <!-- 题目标题 -->
          <!-- 单选题 -->
          <div class="block">
            <div class="questionTitle" v-if="item.type === 1">
              <span class="questionType">单选({{ item.score }}分)</span>
              <span class="titleContent">
                {{ i + 1 }}、{{ item.name }}
              </span>
            </div>
            <div class="option" v-for="(op, ti) in options" :key="ti" v-if="item.type === 1">
              <var-radio-group v-model="radio[i]"  v-for="(o, p) in op" v-if="item.id == ti + 1" :key="p">
                
                <var-radio :checked-value="p">{{ o.option }} {{ o.answer }}</var-radio>
              </var-radio-group>
              <div>
              </div>
            </div>
          </div>
          <!-- 判断题 -->
          <div class="block">
            <div class="questionTitle" v-if="item.type === 3">
              <span class="questionType">判断({{ item.score }}分)</span>
              <span class="titleContent">
                {{ i + 1 }}、{{ item.name }}
              </span>
            </div>
            <div class="option" v-for="(op, ti) in options" v-if="item.type === 3">
              <var-radio-group v-model="radio[i]" v-for="(o, p) in op" v-if="item.id == ti + 1">
                <var-radio :checked-value="p">{{ o.option }} {{ o.answer }}</var-radio>
              </var-radio-group>
              <div>
              </div>
            </div>
          </div>
        </ul>
      </div>
    </div>
</div>
</template>

<script setup>
import { ref,toRaw } from "vue";
import router from "@/router";
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router'
import { useExamStore } from '@/stores/exam'
const examStore = useExamStore()
const { questionList } = storeToRefs(examStore)
const { getTheQuestionList,submitExamDetail } = examStore
// 获取传来的考试试卷id
const route = useRoute()
const examId = route.query.Id

//单选真题答案
const radio = ref([]) 
const radioAll = ref([])

// 提交考试弹窗
const center = ref(false)
// 退出考试弹窗
const exit = ref(false)
// 确认退出考试
const onBack = () => router.push("/publishQuestion");
const score1 = ref(0)

// 确认考试
const onSubmit = () => {
  const examDetail1 = ref([])
  // 将数据处理
  radio.value.map(item => {
      let obj = {
        questionId:item,
        answer:radio.value[item]
      }
      examDetail1.value.push(obj)
  });
  // 判断题目是否正确
  for(let item = 0; item < radio.value.length; item++) {
    if (toRaw(questionList.value).records[item].answer == radio.value[item]) {
      score1.value = score1.value + Number(toRaw(questionList.value).records[item].score);
    } else {
      score1.value = score1.value
    }
  }
  const score = score1.value
  // console.log(JSON.parse(JSON.stringify(toRaw(examDetail1.value))))
  const examDetail = JSON.stringify(toRaw(examDetail1.value))
  // 提交试卷
  submitExamDetail({examDetail,examId,score})
  router.push("/publishQuestion");
}

// 获取试卷题目
let options = ref([])
const obtainExamination = async () => {
  await getTheQuestionList()
  questionList.value.records.map(item => {
    options.value.push(JSON.parse(item.option))
  })
}
obtainExamination() 

// 获取当前时间方法
var nowDate = new Date()
var year = nowDate.getFullYear()
var month = (nowDate.getMonth() + 1).toString()
var day = nowDate.getDate().toString()
var hour = nowDate.getHours().toString()
var minute = nowDate.getMinutes().toString()
var second = nowDate.getSeconds().toString()
if (month.length == 1) {
  month = '0' + month
}
if (day.length == 1) {
  day = '0' + day
}
if (hour.length == 1) {
  hour = '0' + hour
}
if (minute.length == 1) {
  minute = '0' + minute
}
if (second.length == 1) {
  second = '0' + second
}
nowDate = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second

</script>

<style lang="less" scoped>
.main {
  .myPublishQuertion {
    position: fixed;
    font-weight: bolder;
    font-size: larger;
    z-index: 99;
  }

  .popup-example-block {

    width: 350px;

    .blue {
      background: linear-gradient(45deg, rgb(42, 91, 246), rgb(71, 107, 243), rgb(164, 171, 221));
      padding: 5px 0px;

      .p1 {
        font-size: 30px;
        font-weight: bolder;
        color: rgb(247, 247, 253);
        text-align: center;
        padding: 40px 0 10px 0;
      }
    }

    .popup-content {
      font-size: 20px;
      padding: 0 6px;
    }

    .readed {
      padding: 3px 0 10px 0;
      text-align: center;
    }

    .startExam {
      padding: 3px 0 20px 0;
      text-align: center;

    }
  }
  .countDown {
    margin-right: 10px;
  }


  .test {
    padding-top:50px ;
    .questionContent {
      .block {
        height: fit-content;
        margin-left: 20px;
        .questionTitle {
          padding-top: 20px;
          .questionType {
            background-color: rgb(38, 89, 247);
            width: fit-content;
            font-size: 16px;
            color: white;
            margin: 20px 0 20px 0;
            position: relative;
            padding: 5px 10px;
            border-radius: 20px;
          }

          .titleContent {
            padding: 5px;
            margin: 20px 20px 0 0px;
            font-size: 20px;
            font-weight: bolder;
            line-height: 40px;
          }
        }

        .option {
          margin: 20px 20px 0 20px;
          font-size: larger;
          padding-left: 10px  ;
        }
      }

    }

    

  }
}
</style>